<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'>
<script src='http://www.htmleaf.com/assets/js/prefixfree.min.js'></script>
<style class="cp-pen-styles">body { 
  margin: 0; background: #131212;  
} 
div#masonry { 
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
  font-size: 0;  
}
div#masonry img {  
  width: 33.3%;
  transition: .8s opacity;
} 

div#masonry:hover img { opacity: 0.3; }
div#masonry:hover img:hover { opacity: 1; } 

/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
  div#masonry { display: block; }
  div#masonry img {  
  display: inline-block;
  vertical-align: top;
  }
}

 
</style></head><body>
<div id="masonry">
    <img src="http://img.htmleaf.com/1412/201412061559-1.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-2.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-3.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-4.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-6.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-8.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-9.jpg">
    <img src="http://img.htmleaf.com/1412/201412061559-7.jpg">
</div>
123
</body></html>